<template>
	<view class="container" :style="{paddingTop: paddingTop + 'px'}">
		
		<navBar title="申请退款"/>
		
		<view class="c-goods" v-if="suitOrderFlag === '2'">
			<view class="cg-tips">
				因存在组合套餐的关系，申请退款后，主订单的所有商品将一并取消，使用的优惠券和积分将退还
			</view>
		</view>
		<view class="c-goods" v-if="goodsList.length">
			<view class="cg-tips">
				因存在组合促销关系，申请退款后，以下商品的订单将一并
				取消，使用的优惠券可能不再返还
			</view>
			<!-- 商品列表 -->
			<view class="cg-list" v-for="item in goodsList" :key="item.id">
				<view class="cgl-img">
					<image class="img"
						:src="item.picUrl ? item.picUrl : 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_default_square.png'">
					</image>
				</view>
				<view class="cgl-info">
					<view class="cgli-name">
						<text style="margin-right: 12rpx;">【赠品】</text>
							{{ item.giftName }}
					</view>
					<view class="cgli-num">共{{ item.giftNum }}件</view>
				</view>
			</view>
		</view>
		
		<!-- 退款原因 -->
		<view class="c-info">
			<u--form
			  ref="formRef"
			  label-width="90px"
				:rules="rules"
			  :model="formData"
			  :label-style="{ fontSize: '28rpx', color: '#646464' }"
			>
				<u-form-item label="退款原因" prop="refundReason">
					<picker mode="selector" @change="onChangeReason" :range="reasonList">
						<view class="area-input">
							<u--input v-model="formData.refundReason" placeholder="请选择退款原因" border="bottom" readonly></u--input>
							<view class="icon-arrow">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</picker>
				</u-form-item>
				
				<u-form-item label="退款联系人" prop="contactsName">
				  <u--input
				    v-model="formData.contactsName"
				    border="bottom"
				    placeholder="请输入退款联系人"
				  ></u--input>
				</u-form-item>
				
				<u-form-item label="联系方式" prop="contactsMobile">
				  <u--input
				    v-model="contactsMobile"
				    border="bottom"
				    placeholder="请输入联系方式"
				  ></u--input>
				</u-form-item>
			
			</u--form>
			
		</view>
		
		<view class="c-tips">温馨提示：平台审批通过后，退款将在3-7天按原路返还</view>
		
		<!-- 提交 -->
		<view class="c-action">
			<button type="warn" @click.stop="handleSubmit" :loading="btnLoading">申请退款</button>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				suitOrderFlag: null,
				paddingTop: '',
				// orderId: '',
				btnLoading: false,
				goodsList: [],
				formData: {
					refundReason: '',
					contactsName: '',
					contactsMobile: ''
				},
				reasonList: [
					'不喜欢/不想要了',
					'一直没货',
					'与门店协商一致退款'
				],
				rules: {
					refundReason: [
						{
							required: true,
							message: '请选择退款原因',
							trigger: ['blur', 'change']
						}
					],
					contactsName: [
						{
							required: true,
							message: '请输入退款联系人',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// if (/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/.test(value)) {
								// 	callback(new Error('禁止输入表情符号'))
								// }
								if(/[^\u4E00-\u9FA5]/.test(value)){
									callback(new Error('联系人只能输入中文'))
								}
								callback();
							},
						}
					],
					contactsMobile: [
						{
							required: true,
							message: '请输入联系方式',
							trigger: ['blur', 'change']
						},
						{
						  validator: (rule, value, callback) => {
						    return uni.$u.test.mobile(value);
						  },
						  message: '手机号码不正确',
						  trigger: ['change','blur'],
						}
					]
				},
			};
		},
		onReady() {
		  this.$refs.formRef.setRules(this.rules)
		},
		onLoad(query){
			// suitOrderFlag 套装商品订单标记，1=普通商品订单，2=套装商品订单
			const { orderId, suitOrderFlag } = query
			this.orderId = orderId
			this.suitOrderFlag = suitOrderFlag
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			this.getDataInfo(orderId)
		},
    computed: {
      contactsMobile: {
				get() {
          let n = String(this.formData.contactsMobile)
          n = n.length === 11 ? n.slice(0, 3) + '****' + n.slice(7) : n
          return n
        },
        set(val) {
          this.formData.contactsMobile = val || ''
        }
      }
    },
		methods: {
			onChangeReason(e){
				const index = e.detail.value - 0
				this.formData.refundReason = this.reasonList[index]
				this.$refs.formRef.validateField('refundReason')
			},
			async handleSubmit(){
				if(this.btnLoading === true){
					return false
				}
				try {
					await this.$refs.formRef.validate()
					
					this.btnLoading = true
					
					const res = await this.$request({
						method: 'POST',
						url: '/order-center/carOwner/refund/orders',
						data: {
							...this.formData,
							orderId: this.orderId
						}
					})
					
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.redirectTo({
						  url: `/orderPack/aftermarket/index`,
						})
						// 存储用于在（售后/退款）判断页面跳转
						uni.setStorageSync('source', 'refund')
						
					}, 1500)
					
					this.btnLoading = false
					
				} catch (res) {
					uni.showToast({
						title: res.respMsg,
						icon: 'fail'
					})
					this.btnLoading = false
				}
			},
			async getDataInfo(orderId){
				uni.showLoading({
					title: '加载中...'
				})
				const res = await this.$request({
					method: 'GET',
					url: `/order-center/carOwner/pre/refund/orders/${orderId}`,
				})
				
				// 赠品列表
				this.goodsList = res.datas.giftRecords || []
				
				this.formData.contactsName = res.datas.contactsName
				this.formData.contactsMobile = res.datas.contactsMobile || ''
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding-bottom: 190rpx;
	.c-goods {
		margin-bottom: 12rpx;
		padding: 0 32rpx 12rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		.cg-tips {
			box-sizing: border-box;
			padding: 20rpx 62rpx 24rpx;
			text-align: center;
			font-size: 12px;
			line-height: 20px;
			color: rgba(255, 154, 56, 0.85);
			background-color: rgba(255, 247, 239, 1);
		}
		
		// 赠品列表
		.cg-list {
			display: flex;
			box-sizing: border-box;
			padding: 32rpx 0;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
			&:nth-last-child(1){
				border-bottom: none;
			}
			.cgl-img {
				image {
					width: 138rpx;
					height: 138rpx;
				}
			}
			.cgl-info {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 0;
				.cgli-name {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.85);
					text-shadow: 0 0 0.1px currentColor;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp:2;
					word-break: break-all;
				}
				.cgli-num {
					font-size: 13px;
					color: rgba(0, 0, 0, 0.45);
				}
			}

		}
	}
	
	// 退款原因
	.c-info {
		// min-height: 50vh;
		padding: 0 32rpx;
		background-color: #ffffff;
		.area-input {
		  display: flex;
		  flex-direction: row;
		  justify-content: space-between;
		  .icon-arrow {
		    border-bottom: 0.5px solid #dadbde;
		    display: flex;
		    align-items: center;
		  }
		}
	}
	
	.c-tips {
		font-size: 13px;
		text-align: center;
		margin: 30rpx auto;
	}
	
	.c-action {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 178rpx;
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx 32rpx 68rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -10rpx 20rpx 1rpx rgba(0,0,0,0.1);
	}
}
</style>
